Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
CODEPEN
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } body { background-color: #000; } /* Basisstijl voor het SVG-element */ svg { position: absolute; top: 50%; left: 56%; transform: translate(-50%, -50%); width: 100%; height: auto; } /* Tekststijl: vul met patroon, en gebruik dikkere stroke */ text { fill: url(#imagePattern); font-family: "Protest Guerrilla", sans-serif; font-size: 150px; letter-spacing: 5px; stroke: rgb(130, 217, 252); stroke-width: 1px; stroke-dasharray: 500; stroke-dashoffset: 500; filter: url(#glowFilter); /* Voeg gloedfilter toe */ }
console.log("Event Fired") // js is for the animation loop for the strokes const textElement = document.getElementById("animatedText"); function restartAnimation() { textElement.style.transition = "none"; textElement.style.strokeDashoffset = "0"; setTimeout(() => { textElement.style.transition = "stroke-dashoffset 3s ease"; textElement.style.strokeDashoffset = "1000"; }, 50); } // Start de animatie direct en in een loop restartAnimation(); setInterval(restartAnimation, 10000);